import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Grid } from 'react-vant'

const Shopo = (props)=> {
  return (
    <img src={require(`../../assets/img/${props.url}.png`)} style={{width:'50px',height:'50px'}}/>
  )
}

export default () => {
  const navigate = useNavigate()
  function goToplist(){
    navigate('/alltoplist')
  }
  return (
    <Grid columnNum={4} border={false} style={{'--rv-grid-item-content-background-color':'#eee'}}>
      <Grid.Item icon={<Shopo  url='mrtj'/>} text='每日推荐' />
      <Grid.Item icon={<Shopo url='srfm'/>} text='私人FM' />
      <Grid.Item icon={<Shopo url='gd'/>} text='歌单' />
      <Grid.Item icon={<Shopo url='phb'/>} text='排行榜' onClick={goToplist}/>
    </Grid>
  )
}
